<template>
  <div class="ChildPage formPanel">
    <div class="formPanel_title">
      <div class="formPanel_title_label">修改密码</div>
      <div class="formPanel_title_btn">
        <el-button type="primary" size="small" @click="updatePass" :disabled="!checked" v-loading="loading">更新</el-button>
      </div>
    </div>
    <div class="formPanel_center">
      <el-form ref="form" size="small" :model="form" label-width="80px" class="form" label-position="left">
        <el-form-item label="当前密码">
          <el-input type="password" v-model="form.oldPassword" placeholder="请输入当前密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input type="password" v-model="form.newPassword" placeholder="请输入新密码"></el-input>
          <div class="form-info">请输入8-24位密码，密码可包含!@#$%&_特殊字符。</div>
          <PasswordCheck :password="form.newPassword" :min="8" :max="24" @changePassCheck="changePassCheck"></PasswordCheck>
        </el-form-item>
        <el-form-item label="重新输入">
          <el-input type="password" v-model="form.reNewPassword" placeholder="请重新输入密码"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

import PasswordCheck from "../components/common/PasswordCheck.vue";
export default {
  components: {
    PasswordCheck
  },
  data () {
    return {
      loading: false,
      form: {
        oldPassword: null,
        newPassword: null,
        reNewPassword: null
      },
      checked: false
    }
  },
  mounted(){
  },
  methods: {
    changePassCheck(res){
      this.checked = res;
    },
    // 更新密码
    async updatePass() {
      let self = this;

      if(!self.form.oldPassword) {
        this.$message.error('当前密码不能为空！');
        return;
      }
      if(!self.form.newPassword) {
        this.$message.error('新密码不能为空！');
        return;
      }
      if(self.form.newPassword !== self.form.reNewPassword) {
        this.$message.error('两次密码不同！');
        return;
      }
      try {
        await this.$confirm(`确认修改密码吗?`, '确认', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return;
      }
      let param = {
        oldPassword: self.form.oldPassword,
        newPassword: self.form.newPassword,
        newPasswordConfirm: self.form.reNewPassword
      }
      self.loading = true;
      self.$api.changePassword(param).then(function() {
        self.$message({
          type: 'success',
          message: "密码修改成功！请重新登陆！"
        })
        self.$router.push({
          path: "/login"
        })
        setTimeout(() => {
          self.clearSession()
        }, 1000)
      }).finally(() => {
        self.loading = false;
      })
    }
  },
  watch: {
  }
}
</script>
<style scoped lang="scss">
  .form{
    .form-info{
      color: var(--font-hc);
    }
  }
  :deep(.el-form-item__content){
    text-align: left;
  }
</style>
